<template>
  <el-card>
    <!-- 渲染表格 -->
    <div
      class="title"
    >{{anzhidianinfo.city+anzhidianinfo.shiqu+anzhidianinfo.area+anzhidianinfo.anzhidian}}</div>
    <!-- 绘制该点具体的用户表单信息 -->

    <el-table :data="anZhiInfoDetailsData" style="width: 100%" border stripe>
      <!-- <el-table-column type="expand">
        <template slot-scope="scope">
      <singleuserinfo :dataValue="scope.row"></singleuserinfo>-->
      <!-- <div class="tables" v-html="tableStrings" ref="tablesData" @click=createTables(scope.row) v-trigger ></div> -->
      <!-- </template>
      </el-table-column>-->
      <el-table-column type="index" label="序号" align="center" width="120"></el-table-column>
      <el-table-column prop="name" label="家庭户主" align="center"></el-table-column>
      <el-table-column prop="roomInfo" label="居住地址" align="center"></el-table-column>
      <el-table-column prop="phoneNumber" label="联系电话" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="warning" size="small" @click="getMoreInfo(scope.row)">加载更多信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗然后加载更多信息 -->
    <el-dialog title :visible.sync="getMoreInfodialogVisible" width="60%" ref="detailDialog">
      <singleuserinfo :dataValue="singleUserInfo" v-if="hackReset"></singleuserinfo>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getMoreInfodialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getMoreInfodialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
import SingleUserInfo from './SingleUserInfo';
export default {
  data() {
    return {
      anzhidianinfo: '',
      anZhiInfoDetailsData: [],
      tableStrings: '',
      getMoreInfodialogVisible: false,
      singleUserInfo: {},
      hackReset:true // 判断子组件的条件开关
    };
  },
  methods: {
    async getAnZhiDianInfo() {
      // 实际后台环境中需要先获取上一个页面传递过来的城市的id然后去后台发起请求
      var info = JSON.parse(window.localStorage.getItem('info'));
      this.anzhidianinfo = info;
      if (info.area_code === '422801') {
        let res = await this.axios.get('/data/lijiahe_userInfo.json');
        if (res.request.status != 200) {
          this.$message.error('获取信息出错');
        }
        this.anZhiInfoDetailsData = res.data;
      } else if (info.area_code === '422825') {
        let res = await this.axios.get('/data/manguliu_userInfo.json');

        if (res.request.status != 200) {
          this.$message.error('获取信息出错');
        }
        this.anZhiInfoDetailsData = res.data;
      }
    },


    getMoreInfo(value) {
      // console.log(value);
      this.hackReset = false;
       this.getMoreInfodialogVisible = true;
      this.singleUserInfo = value;
	      	this.$nextTick(() => {
	       		this.hackReset = true
	      	})
     
    },
    getSingleUserInfo(value) {
      // console.log(value);
      window.sessionStorage.setItem('singleInfo', JSON.stringify(value));
      this.$router.push('/singleUserInfo');
    }
  },
  components: {
    singleuserinfo: SingleUserInfo
  },
  // 自定义点击事件指令
  // directives: {
  //   trigger: {
  //     inserted(el, binging) {
  //       el.click();
  //     }
  //   }
  // },
  created() {
    this.getAnZhiDianInfo();
  }
};
</script>
<style lang="less" scoped>
.title {
  font-size: 24px;
  text-align: center;
  margin: 10px 0;
}
</style>